// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

// 定义html片段
let apiCarhtml = ''

// 组装html片段，先遍历数据
apiTypeData.forEach(function (v, i) {
    apiCarhtml += `
    <a href="#" data-keyword = '${v.keyword}' class="${i === 0 ? 'active' : ''} ${v.isnew ? 'fbd' : ''}">${v.name}</a>
        `
})

//将html渲染到页面
$('.apiA').innerHTML = apiCarhtml
// console.log(apiCarhtml);


// 点击Api数据，切换激活样式，动态添加，使用事件委派
$('.apiA').addEventListener('click', function (e) {
    if (e.target.nodeName === 'A') {
        // 清空所有激活样式
        [...$('.apiA').children].forEach(function (dom) {
            dom.classList.remove('active')
        })
        // 给当前数据添加激活样式
        e.target.classList.add('active');

        // 给搜索框的文字，获取文本
        $('.all').textContent = e.target.textContent
        // 给搜索框，获取文本
        $('.searchBox').placeholder = e.target.dataset.keyword

    }
})



//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
// 定义HTML片段
let listDataHTML = ''

// 组装html片段
listDataArr.forEach(function (v) {
    listDataHTML += `
    <li class=" df jcc fdc aic">
        <div class="move df jcc fdc aic">
        <span class="special ${v.isSpecial ? 'block' : 'none'}">企业专用</span>
            <a href="../APIDetails/APIDetails.html"><img src="../../assets/images/${v.img}" ></a>
            <p class="pointer"><a href="../APIDetails/APIDetails.html">${v.name}</a></p>
            <p class="free"><a href="../APIDetails/APIDetails.html" class = ' ${v.price === '免费' ? 'green' : 'red'}'>${v.price}</a></p>
        </div>
        <a href="#" class="pleaseData">申请数据</a>
    </li>
    `
})

// 渲染到页面
$('.itemBox ul').innerHTML = listDataHTML


// 蒙层
// 点击申请数据显示蒙版
$('.itemBox ul').addEventListener('click', function (e) {
    if (e.target.classList.contains('pleaseData')) {
        $('.mask').style.display = 'flex'
    }
})
// 点击蒙层隐藏蒙版
$('.mask').addEventListener('click', function () {
    $('.mask').style.display = 'none'

})

// 阻止冒泡
$('.dengLuBox').addEventListener('click', function (e) {
    e.stopPropagation()
})



// 登录
// 切换登录和扫码
$('.numLogin').addEventListener('click', function () {
    $('.numLogin').classList.add('active')
    $('.scanLogin').classList.remove('active')
    $('.change1').style.display = 'block'
    $('.change2').style.display = 'none'
})
$('.scanLogin').addEventListener('click', function () {
    $('.scanLogin').classList.add('active')
    $('.numLogin').classList.remove('active')
    $('.change1').style.display = 'none'
    $('.change2').style.display = 'block'
})

// 输入框有值显示删除按钮
$('.useNum').addEventListener('input', function () {
    $('.x1').style.display = 'block'
})
// 输入框点击删除按钮，删除输入框值 ,并隐藏删除按钮
$('.x1').addEventListener('click', function () {
    $('.useNum').value = ''
    $('.x1').style.display = 'none'
})

// 密码有值显示删除按钮
$('.psd').addEventListener('input', function () {
    $('.x2').style.display = 'block'
})
// 密码点击删除按钮，删除输入框值 ,并隐藏删除按钮
$('.x2').addEventListener('click', function () {
    $('.psd').value = ''
    $('.x2').style.display = 'none'
})

// 输入框正确格式,失去焦点时显示错误

let reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;

$('.useNum').addEventListener('blur', function () {
    let bool = reg.test(this.value)
    if (!bool) {
        $('.useFormat').style.display = 'block'
    } else {
        $('.useFormat').style.display = 'none'
    }


})

// 密码框正确格式,失去焦点时显示错误

let reg2 = /^[0-6]{6}$/;

$('.psd').addEventListener('blur', function () {
    let bool2 = reg2.test(this.value)
    if (!bool2) {
        $('.psdFormat').style.display = 'block'
    } else {
        $('.psdFormat').style.display = 'none'
    }
})

//启动定时器
setInterval(function () {
    $('.useFormat').style.display = 'none'
}, 2000)

setInterval(function () {
    $('.psdFormat').style.display = 'none'
}, 2000)



// 点击登录按钮验证用户名和密码正确性，正确跳转页面
$('.change1').addEventListener('submit', function (e) {
    let b1 = reg.test($('.useNum').value)
    let b2 = reg2.test($('.psd').value)
    let b3 = b1 && b2
    console.log(b3);

    if (!b1) {
        $('.useFormat').style.display = 'block'

        e.preventDefault();

    } else if (!b2) {
        $('.psdFormat').style.display = 'block'

        e.preventDefault();
    } else if (b3) {
        let cont = 5
        let timer = setInterval(function () {
            cont--
            $('.trueFormat').style.display = 'block'
            if (cont === 0) {
                $('.trueFormat').style.display = 'none'
                clearInterval(timer);

            }
        }, 500)
        e.preventDefault();

        let p = setInterval(function () {
            ++cont
            if (cont === 2) {
                clearInterval(p);
                location.href = '../home/home.html'

            }
        }, 1000)
    }
})

